diff options
Diffstat (limited to 'src/routes/user/[user]')
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 131 |
1 files changed, 65 insertions, 66 deletions
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index 17073c4d..0133c48b 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -17,6 +17,7 @@ import AnimeRateLimited from '$lib/Error/AnimeRateLimited.svelte'; import { activityText } from '$lib/AniList/activity.js'; import SettingHint from '$lib/Settings/SettingHint.svelte'; + import Popup from '$lib/Popup.svelte'; // import { io } from 'socket.io-client'; export let data; @@ -404,9 +405,9 @@ <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} /> {#if loadError} - <div class="card popup"> + <Popup> {loadError} - </div> + </Popup> {:else} {#await currentUserIdentity} <Message message="Loading user ..." /> @@ -666,7 +667,7 @@ {/if} </div> {:catch} - <div class="card popup">Could not parse badges</div> + <Popup>Could not parse badges</Popup> {/await} {:else} <Message message="Loading badges ..." /> @@ -674,80 +675,78 @@ <Skeleton grid={true} count={100} width="150px" height="170px" /> {/if} {:catch} - <div class="card popup">Could not fetch badges</div> + <Popup>Could not fetch badges</Popup> {/await} {:catch} <AnimeRateLimited>This user's badges could not be loaded.</AnimeRateLimited> {/await} {/if} -{#if importMode} - <div class="popup popup-fullscreen"> - <div class="card"> - <SettingHint>Import badges from an activity post</SettingHint> - +{#if true} + <Popup fullscreen onLeave={() => (importMode = false)} show={importMode}> + <SettingHint>Import badges from an activity post</SettingHint> + + <p /> + + <input + type="text" + placeholder={$locale().user.badges.editMode.activityURL} + id="import_activity_url" + minlength="1" + maxlength="1000" + size="20" + /> + <input + type="text" + placeholder={$locale().user.badges.editMode.category} + id="import_category" + minlength="1" + maxlength="1000" + size="20" + /> + + <p /> + + <input type="checkbox" id="import_links" name="import_links" bind:checked={importLinks} /> + Import Links + <SettingHint lineBreak> + If your images are nested in links, check this box to import the links as well. + </SettingHint> + + <p /> + + <input type="checkbox" id="import_links" name="import_links" bind:checked={importReplies} /> + Import Replies + + <p /> + + <button + on:click={() => { + importMode = false; + importImages = undefined; + }} + class="button-lined" + > + {$locale().user.badges.importMode.cancel} + </button> + <button on:click={() => parsePost()} class="button-lined" style="float: right;"> + {$locale().user.badges.importMode.fetch} + </button> + + {#if importImages && importImages.length > 0} <p /> - <input - type="text" - placeholder={$locale().user.badges.editMode.activityURL} - id="import_activity_url" - minlength="1" - maxlength="1000" - size="20" - /> - <input - type="text" - placeholder={$locale().user.badges.editMode.category} - id="import_category" - minlength="1" - maxlength="1000" - size="20" - /> - - <p /> + Import {importImages.length} badges? + <button on:click={() => importBadges()} class="button-lined no-shadow"> + {$locale().user.badges.importMode.import} + </button> - <input type="checkbox" id="import_links" name="import_links" bind:checked={importLinks} /> - Import Links <SettingHint lineBreak> - If your images are nested in links, check this box to import the links as well. + Please wait until import mode automatically disables after importing, otherwise you risk + skipping or duplicating badges. </SettingHint> - - <p /> - - <input type="checkbox" id="import_links" name="import_links" bind:checked={importReplies} /> - Import Replies - - <p /> - - <button - on:click={() => { - importMode = false; - importImages = undefined; - }} - class="button-lined" - > - {$locale().user.badges.importMode.cancel} - </button> - <button on:click={() => parsePost()} class="button-lined" style="float: right;"> - {$locale().user.badges.importMode.fetch} - </button> - - {#if importImages && importImages.length > 0} - <p /> - - Import {importImages.length} badges? - <button on:click={() => importBadges()} class="button-lined no-shadow"> - {$locale().user.badges.importMode.import} - </button> - - <SettingHint lineBreak> - Please wait until import mode automatically disables after importing, otherwise you risk - skipping or duplicating badges. - </SettingHint> - {/if} - </div> - </div> + {/if} + </Popup> {/if} <style> |